<template>
  <div class="entrance">
    <div class="bg-color-black">
      <div class="d-flex pt-2 pl-2">
        <span>
          <i class="iconfont icon-fenxi5" />
        </span>
        <div class="d-flex">
          <span class="fs-xxl text mx-2 mt-1">寝室门禁</span>
          <dv-decoration-1 style="width:100px;height:25px;" :color="datavColors"/>
        </div>
      </div>
      <div class="d-flex">
        <chart ref="entranceChart" />
        <div class="entranceInfo">
          <div class="switch d-flex">
            <div :class="[switchButton,active == 0?choosed:'']" @click="activeChange(0)">男生</div>
            <div :class="[switchButton,active == 1?choosed:'']" @click="activeChange(1)">女生</div> 
          </div>
          <div class="info content-box">
            <div v-for="(item,index) in entranceData" :key="index" :class="['infoBox',`color${index+1}`]">
              <p class="online">{{item.count}}</p>
              <p class="label">{{item.label}}</p>
            </div>
          </div>
          <dv-decoration-2 style="width:400px;height:5px;" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent,reactive,ref,computed } from 'vue'
import { useStore } from 'vuex'
import Chart from './chart/index'
export default defineComponent({
  components: {
    Chart
  },
  setup() {
    const datavColors = computed(() => useStore().state.datavColors)
    const entranceData = ref([
      {
        count:20,
        label:'A区寝室楼'
      },
      {
        count:40,
        label:'B区寝室楼'
      },
      {
        count:60,
        label:'C区寝室楼'
      }
    ])
    const active = ref(0)
    const switchButton = ref('switch-button')
    const choosed = ref('choosed')
    const entranceChart = ref(null)

    const activeChange = (val:any) =>{
      entranceChart.value.resetData(val)
      active.value = val
      entranceData.value = [
        {
          count:val==0?20:70,
          label:'A区寝室楼'
        },
        {
          count:val==0?40:50,
          label:'B区寝室楼'
        },
        {
          count:val==0?60:30,
          label:'C区寝室楼'
        }
      ]
    }
    return{
      active,
      switchButton,
      choosed,
      entranceData,
      entranceChart,
      activeChange,
      datavColors
    }
  }
})
</script>

<style lang="scss" scoped>

$box-height: 240px;
$box-width: 100%;
.entrance {
  padding: 20px 16px;
  height: $box-height;
  width: $box-width;
  border-radius: 5px;
  .bg-color-black {
    height: $box-height - 35px;
    border-radius: 10px;
  }
  .text {
    color: #c3cbde;
  }
  .chart-box {
    margin-top: 16px;
    width: 170px;
    height: 170px;
    .active-ring-name {
      padding-top: 10px;
    }
  }
  .entranceInfo{
    width: 100%;
    padding: 0 10px;
    .switch{
      float: right;
      .switch-button{
        padding: 10px 20px;
        cursor: pointer;
      }
      .choosed{
        color: #fff;
        background-color: #55c3d573;
      }
    }
    .info{
      margin-top:60px;
      margin-bottom: 20px;
      .infoBox{
        padding: 5px 20px;
        .label{
          font-size: 18px;
        }
      }
      .color1{
        border-left: 5px solid #f90;
      }
      .color2{
        border-left: 5px solid #19be6b;
      }
      .color3{
        border-left: 5px solid #2d8cf0;
      }
    }
  }
  .content-box {
    display: grid;
    grid-template-columns: 3fr 3fr 3fr;
  }
  .online {
    margin: 10px 0;
    font-size: 24px;
    color: #ffffff;
    text-shadow: 0 0 1px #fff, 0 0 3px #fff, 0 0 5px #00a67c,0 0 7px #00a67c;
  }
}
</style>
